<template>
	<view class="content">
		<top-header :value="0"></top-header>
		<view class="index">
			<view class="operation">
				<view class="operation_region">
					<view class="operation_item" @click="openRule">
						<view class="name">排序</view>
						<i :class="isShowRule ? 'icon_active ico' : 'ico'"></i>
					</view>
					<view class="operation_item" @click="openOverFlow(1)">
						<view class="name">年龄</view>
						<i class="ico"></i>
					</view>
					<view class="operation_item" @click="openOverFlow(2)">
						<view class="name">身高</view>
						<i class="ico"></i>
					</view>
					<view class="operation_item" @click="toMore">
						<view class="name">更多</view>
						<i class="ico"></i>
					</view>
				</view>
			</view>
			<view class="rule" v-show="isShowRule">
				<view class="rule_region">
					<view :class="rule_current === index ? 'rule_active rule_item' : 'rule_item'"
						v-for="(item, index) in ruleList" :key="item.id">
						<i class="ico" v-if="index === 1"></i>
						<view class="rule_text">{{ item.name }}</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view :id="item.id" class="list_item" v-for="(item,index) in infoList" :key="index">
					<view class="hd" @click="toIndexDetail(item)">
						<view class="left">
							<image :src="item.avatarUrl" mode=""></image>
						</view>
						<view class="right">
							<view class="name">
								<view class="name_text">{{item.username}}</view>
								<image :src="item.sexCode?'../../static/iconfont/grade11.png':'../../static/iconfont/grade21.png'" mode=""></image>
							</view>
							<view class="age">{{item.workPlace}} {{item.birthday}}岁 {{item.hunyinState}}</view>
							<view class="work">{{item.height}}cm {{item.xueli}} {{item.monthIncome}}</view>
							<view class="tagList">
								<view class="tag">期望1~3年结婚</view>
							</view>
						</view>
					</view>
					<view class="bd">
						<view class="tag">寻觅</view>
						<view class="desc">未婚，20 ~ 25岁，153 ~ 170cm，本科，3-5千，等等</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" mode="center" class="myPopup">
			<view class="myOverlay">
				<view class="myOverlay_region" v-if="type === 1">
					<view class="title">
						<view class="left">年龄范围</view>
						<view class="right"><u-button text="确定" color="#ff589b" @click="submit"></u-button></view>
					</view>
					<view class="content">
						<picker-view :indicator-style="indicatorStyle" :value="value" @change="changeHandler"
							class="picker-view">
							<picker-view-column v-for="(item, index) in agecolumn" :key="index">
								<view class="item" v-for="(item, index) in item" :key="index">{{ item }}</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
				<view class="myOverlay_region" v-else>
					<view class="title">
						<view class="left">身高</view>
						<view class="right"><u-button text="确定" color="#ff589b" @click="submit"></u-button></view>
					</view>
					<view class="content">
						<picker-view :indicator-style="indicatorStyle" :value="value" @change="changeHandler"
							class="picker-view">
							<picker-view-column v-for="(item, index) in heightColumn" :key="index">
								<view class="item" v-for="(item, index) in item" :key="index">{{ item }}</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show2" mode="right" @close="close2" :safeAreaInsetTop="true" class="myText">
			<view class="more">
				<view class="search">
					<view class="search_region">
						<input type="text" placeholder="按会员UID昵称" />
						<view class="ico"></view>
					</view>
				</view>
				<tn-form-item label="年龄" :labelPosition="labelPosition" :labelAlign="labelAlign">
					<tn-input v-model="age" type="select" placeholder="请选择" :border="border"
						:selectOpen="selectAge" @click="selectAge = true"></tn-input>
				</tn-form-item>
				<tn-form-item label="身高" :labelPosition="labelPosition" :labelAlign="labelAlign">
					<tn-input v-model="height" type="select" placeholder="请选择" :border="border"
						:selectOpen="selectHeight" @click="selectHeight = true"></tn-input>
				</tn-form-item>
				<tn-form-item label="婚史" :labelPosition="labelPosition" :labelAlign="labelAlign">
					<tn-input v-model="maritalStatus" type="select" placeholder="请选择" :border="border"
						:selectOpen="selectMaritalStatus" @click="selectMaritalStatus = true"></tn-input>
				</tn-form-item>
				<tn-form-item label="户籍" prop="region" :labelPosition="labelPosition" :labelAlign="labelAlign">
					<tn-input v-model="huji" type="select" placeholder="请选择" :border="border"
						:selectOpen="selectHuJi" @click="selectHuJi = true"></tn-input>
				</tn-form-item>
				<tn-button backgroundColor="#ff589b" fontColor="white" :shadow="true" width="400rpx" margin="40rpx 0 0 55rpx" @click="updateInfo">筛选</tn-button>
				<tn-button backgroundColor="#ff589b" fontColor="white" :shadow="true" width="400rpx" margin="40rpx 0 0 55rpx" @click="withdraw">撤回筛选</tn-button>
			</view>
		</u-popup>
		<u-back-top :scroll-top="scrollTop">
			<view id="btmTopBtn">
				<i class="ico"></i>
				顶部
			</view>
		</u-back-top>
		<u-overlay :show="show3" @click="show3 = false">
			<view class="arrow_region">
				<view> <i class="ico"></i>头像</view>
				<view class="ed"><i class="ico"></i>列表</view>
				<view><i class="ico"></i>大图</view>
			</view>

		</u-overlay>
		<view class="btmKefuBtn" @click="openArrow_region">
			<i class="ico"></i>
			列表
		</view>
		<tn-select v-model="selectMaritalStatus" mode="single" :list="selectMaritalStatusList" @confirm="maritalStatusConfirm"></tn-select>
		<tn-select v-model="selectAge" mode="multi" :list="selectAgeList" @confirm="AgeConfirm"></tn-select>
		<tn-select v-model="selectHeight" mode="multi" :list="selectHeightList" @confirm="heightConfirm"></tn-select>
		<tn-picker v-model="selectHuJi" mode="region" @confirm="hujiConfirm"></tn-picker>
		<tabbar :value="0"></tabbar>
	</view>
</template>

<script>
	export default {
		name: 'index',
		data() {
			return {
				show3: false,
				show: false,
				labelPosition: 'left',
				labelAlign: 'right',
				maritalStatus: '',
				huji: '',
				selectMaritalStatus: false,
				selectHuJi: false,
				selectAge: false,
				selectHeight: false,
				age: '',
				minAge: '',
				maxAge: '',
				height: '',
				maxHeight: '',
				minHeight: '',
				border: false,
				infoList: [],
				ruleList: [{
						id: 1,
						name: '默认排序'
					},
					{
						id: 2,
						name: '附件的'
					},
					{
						id: 3,
						name: '实名认证'
					},
					{
						id: 4,
						name: '真人认证'
					},
					{
						id: 5,
						name: '最新加入'
					},
					{
						id: 6,
						name: '最近登录'
					},
					{
						id: 7,
						name: '人气最高'
					},
					{
						id: 8,
						name: '最有魅力'
					},
					{
						id: 9,
						name: '专区推荐'
					}
				],
				selectMaritalStatusList:[
					{
						label: '未婚',
					},
					{
						label: '离异',
					},
					{
						label: '其它',
					}
				],
				selectAgeList:[
					[{
							value: '18',
							label: '18'
						},
						{
							value: '19',
							label: '19'
						},
						{
							value: '20',
							label: '20'
						},
						{
							value: '21',
							label: '21'
						},
						{
							value: '22',
							label: '22'
						},
						{
							value: '23',
							label: '23'
						},
						{
							value: '24',
							label: '24'
						},
						{
							value: '25',
							label: '25'
						},
						{
							value: '26',
							label: '26'
						},
						{
							value: '26',
							label: '26'
						},
						{
							value: '27',
							label: '27'
						},
						{
							value: '28',
							label: '28'
						},
						{
							value: '29',
							label: '29'
						},
						{
							value: '30',
							label: '30'
						},
					],
					[{
							value: '18',
							label: '18'
						},
						{
							value: '19',
							label: '19'
						},
						{
							value: '20',
							label: '20'
						},
						{
							value: '21',
							label: '21'
						},
						{
							value: '22',
							label: '22'
						},
						{
							value: '23',
							label: '23'
						},
						{
							value: '24',
							label: '24'
						},
						{
							value: '25',
							label: '25'
						},
						{
							value: '26',
							label: '26'
						},
						{
							value: '26',
							label: '26'
						},
						{
							value: '27',
							label: '27'
						},
						{
							value: '28',
							label: '28'
						},
						{
							value: '29',
							label: '29'
						},
						{
							value: '30',
							label: '30'
						},
					]
				],
				selectHeightList:[
					[{
							label: '140cm'
						},
						{
							label: '141cm'
						},
						{
							label: '142cm'
						},
						{
							label: '143cm'
						},
						{
							label: '144cm'
						},
						{
							label: '145cm'
						},
						{
							label: '146cm'
						},
						{
							label: '147cm'
						},
						{
							label: '148cm'
						},
						{
							label: '149cm'
						},
						{
							label: '150cm'
						},
						{
							label: '151cm'
						},
						{
							label: '152cm'
						},
						{
							label: '153cm'
						},
						{
							label: '154cm'
						},
						{
							label: '155cm'
						},
						{
							label: '156cm'
						},
						{
							label: '157cm'
						},
						{
							label: '158cm'
						},
						{
							label: '159cm'
						},
						{
							label: '160cm'
						},
						{
							label: '161cm'
						},
						{
							label: '162cm'
						},
						{
							label: '163cm'
						},
						{
							label: '164cm'
						},
						{
							label: '165cm'
						},
					],
					[{
							label: '140cm'
						},
						{
							label: '141cm'
						},
						{
							label: '142cm'
						},
						{
							label: '143cm'
						},
						{
							label: '144cm'
						},
						{
							label: '145cm'
						},
						{
							label: '146cm'
						},
						{
							label: '147cm'
						},
						{
							label: '148cm'
						},
						{
							label: '149cm'
						},
						{
							label: '150cm'
						},
						{
							label: '151cm'
						},
						{
							label: '152cm'
						},
						{
							label: '153cm'
						},
						{
							label: '154cm'
						},
						{
							label: '155cm'
						},
						{
							label: '156cm'
						},
						{
							label: '157cm'
						},
						{
							label: '158cm'
						},
						{
							label: '159cm'
						},
						{
							label: '160cm'
						},
						{
							label: '161cm'
						},
						{
							label: '162cm'
						},
						{
							label: '163cm'
						},
						{
							label: '164cm'
						},
						{
							label: '165cm'
						},
						{
							label: '166cm'
						},
						{
							label: '167cm'
						},
						{
							label: '168cm'
						},
						{
							label: '169cm'
						},
						{
							label: '170cm'
						},
						{
							label: '171cm'
						},
						{
							label: '172cm'
						},
						{
							label: '173cm'
						},
						{
							label: '174cm'
						},
						{
							label: '175cm'
						},
						{
							label: '176cm'
						},
						{
							label: '177cm'
						},
						{
							label: '178cm'
						},
						{
							label: '179cm'
						},
						{
							label: '180cm'
						},
						{
							label: '181cm'
						},
						{
							label: '182cm'
						},
						{
							label: '183cm'
						},
						{
							label: '184cm'
						},
						{
							label: '185cm'
						},
						{
							label: '186cm'
						},
						{
							label: '187cm'
						},
						{
							label: '188cm'
						},
						{
							label: '189cm'
						},
						{
							label: '190cm'
						},
					]
				],
				rule_current: 0,
				isShowRule: false,
				agecolumn: [],
				innerIndex: [0],
				indicatorStyle: `height: 100rpx;`,
				value: [5, 15],
				heightColumn: [],
				type: 1,
				show2: false,
				scrollTop: 0
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.init();
			this.getInfo()
		},
		methods: {
			openRule() {
				this.isShowRule = !this.isShowRule;
			},
			openArrow_region() {
				this.show3 = true;
			},
			init() {
				let list = [];
				for (let i = 18; i <= 80; i++) {
					list.push(i + '岁');
				}
				this.agecolumn = [list, list];
				let list2 = [];
				for (let i = 140; i <= 210; i++) {
					list2.push(i + 'cm');
				}
				this.heightColumn = [list2, list2];
			},
			changeHandler(e) {
				console.log(e);
			},
			close() {
				this.show = false;
			},
			close2() {
				this.show2 = false;
			},
			submit(event) {
				this.show = false;
			},
			openOverFlow(type) {
				this.type = type;
				this.show = true;
			},
			toMore() {
				this.show2 = true;
			},
			maritalStatusConfirm(event){
				this.maritalStatus = `${event[0]['label']}`
				console.log(this.maritalStatus);
			},
			hujiConfirm(event){
				this.huji = event.province.label + '-' + event.city.label + '-' + event.area.label
				console.log(this.huji);
			},
			AgeConfirm(event){
				this.maxAge = `${event[1]['label']}`
				this.minAge = `${event[0]['value']}`
				this.age = this.minAge + '岁' + ' ~ ' + this.maxAge + '岁'
			},
			heightConfirm(event){
				this.maxHeight = `${event[1]['label']}`
				this.minHeight = `${event[0]['label']}`
				this.height = this.minHeight + ' ~ ' + this.maxHeight
			},
			toIndexDetail(item) {
				// let id = event.currentTarget.id
				console.log(item);
				
				this.$store.state.userInfo = JSON.parse(JSON.stringify(item));
				uni.navigateTo({
					url: "/pages/indexdetail/indexdetail"
				})
			},
			withdraw(){
				this.getInfo()
			},
			async getInfo() {
				let id = uni.getStorageSync('id')
				let resdata = await this.request({
					method: 'GET',
					url: '/user/page',
					data: {
						pageNum: 1,
						pageSize: 100,
						username: ''
					}
				});
				console.log(resdata);
				this.infoList = resdata.data.records

				let infoList = this.infoList

				for (let i = 0; i < this.infoList.length; i++) {
					var a = this.infoList[i].monthIncome
					switch (a) {
						case 1:
							infoList[i].monthIncome = '3千以下';
							break;
						case 2:
							infoList[i].monthIncome = '3—5千';
							break;
						case 3:
							infoList[i].monthIncome = '5—7千';
							break;
						case 4:
							infoList[i].monthIncome = '7—9千';
							break;
						case 5:
							infoList[i].monthIncome = '0.9—1.5万';
							break;
						case 6:
							infoList[i].monthIncome = '1.5万—2万';
							break;
						case 7:
							infoList[i].monthIncome = '2—2.5万';
							break;
						case 8:
							infoList[i].monthIncome = '2.5—3万';
							break;
						case 9:
							infoList[i].monthIncome = '3—5万';
							break;
						case 10:
							infoList[i].monthIncome = '5—10万';
							break;
						case 11:
							infoList[i].monthIncome = '10万以上';
							break;
					}
					var b = this.infoList[i].xueli
					switch (b) {
						case 1:
							infoList[i].xueli = '初中';
							break;
						case 2:
							infoList[i].xueli = '高中';
							break;
						case 3:
							infoList[i].xueli = '大专';
							break;
						case 4:
							infoList[i].xueli = '本科';
							break;
						case 5:
							infoList[i].xueli = '硕士';
							break;
						case 6:
							infoList[i].xueli = '博士';
							break;
					}
					var birthday = this.infoList[i].birthday.split(' ')[0]
					// console.log(birthday);
					let age = this.getAge(birthday)
				    this.infoList[i].birthday = age
					
					var sex = this.infoList[i].sex
					if(sex == '男'){
						this.infoList[i].sexCode = 1
					}else {
						this.infoList[i].sexCode = ''
					}
				}
				console.log(this.infoList);
				
				this.show = false;
			},
			async updateInfo(){
				// console.log(111);
				let token = uni.getStorageSync('token')
				let uid = Number(uni.getStorageSync('id'))
				let maxAge = Number(this.maxAge)
				let minAge = Number(this.minAge)
				let maxHeight = Number(this.maxHeight.replace('cm'," "))
				let minHeight = Number(this.minHeight.replace('cm'," "))
				let huji = this.huji
				let maritalStatus = this.maritalStatus
				let resData = await this.request({
					url:'/request/selectUpdate',
					data:{
						uid,
						maxAge,
						minAge,
						maxHeight,
						minHeight,
						huji,
						maritalStatus
					},
					method:'POST'
				})
				console.log(resData);
				this.infoList = resData
				
				let infoList = this.infoList
				for (let i = 0; i < this.infoList.length; i++) {
					var a = this.infoList[i].monthIncome
					switch (a) {
						case 1:
							infoList[i].monthIncome = '3千以下';
							break;
						case 2:
							infoList[i].monthIncome = '3—5千';
							break;
						case 3:
							infoList[i].monthIncome = '5—7千';
							break;
						case 4:
							infoList[i].monthIncome = '7—9千';
							break;
						case 5:
							infoList[i].monthIncome = '0.9—1.5万';
							break;
						case 6:
							infoList[i].monthIncome = '1.5万—2万';
							break;
						case 7:
							infoList[i].monthIncome = '2—2.5万';
							break;
						case 8:
							infoList[i].monthIncome = '2.5—3万';
							break;
						case 9:
							infoList[i].monthIncome = '3—5万';
							break;
						case 10:
							infoList[i].monthIncome = '5—10万';
							break;
						case 11:
							infoList[i].monthIncome = '10万以上';
							break;
					}
					var b = this.infoList[i].xueli
					switch (b) {
						case 1:
							infoList[i].xueli = '初中';
							break;
						case 2:
							infoList[i].xueli = '高中';
							break;
						case 3:
							infoList[i].xueli = '大专';
							break;
						case 4:
							infoList[i].xueli = '本科';
							break;
						case 5:
							infoList[i].xueli = '硕士';
							break;
						case 6:
							infoList[i].xueli = '博士';
							break;
					}
					var birthday = this.infoList[i].birthday.split(' ')[0]
					// console.log(birthday);
					let age = this.getAge(birthday)
				    this.infoList[i].birthday = age
					
					var sex = this.infoList[i].sex
					if(sex == '男'){
						this.infoList[i].sexCode = 1
					}else {
						this.infoList[i].sexCode = ''
					}
				}
				console.log(this.infoList);
				
				
			},
			getAge(strAge) {
				var birArr = strAge.split("-");
				var birYear = birArr[0];
				var birMonth = birArr[1];
				var birDay = birArr[2];
				var d = new Date();
				var nowYear = d.getFullYear();
				var nowMonth = d.getMonth() + 1; //记得加1
				var nowDay = d.getDate();
				var returnAge;
				if (birArr == null) {
					return false
				};
				var d = new Date(birYear, birMonth - 1, birDay);
				if (d.getFullYear() == birYear && (d.getMonth() + 1) == birMonth && d.getDate() == birDay) {
					if (nowYear == birYear) {
						returnAge = 0; // 
					} else {
						var ageDiff = nowYear - birYear; // 
						if (ageDiff > 0) {
							if (nowMonth == birMonth) {
								var dayDiff = nowDay - birDay; // 
								if (dayDiff < 0) {
									returnAge = ageDiff - 1;
								} else {
									returnAge = ageDiff;
								}
							} else {
								var monthDiff = nowMonth - birMonth; // 
								if (monthDiff < 0) {
									returnAge = ageDiff - 1;
								} else {
									returnAge = ageDiff;
								}
							}
						} else {
							return "出生日期晚于今天，数据有误"; //返回-1 表示出生日期输入错误 晚于今天
						}
					}
					return returnAge;
				} else {
					return ("输入的日期格式错误！");
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.btmKefuBtn {
		background-color: #ff589b;
		color: #fff;
		bottom: 320rpx;
		width: 88rpx;
		height: 82rpx;
		position: fixed;
		right: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		flex-flow: column;
		font-size: 24rpx;

		.ico {
			font-size: 32rpx;
		}
	}

	.arrow_region {
		position: fixed;
		bottom: 420rpx;
		right: 40rpx;
		display: flex;
		flex-flow: column;

		view {
			margin-top: 10rpx;
			width: 86rpx;
			height: 86rpx;
			border-radius: 10rpx;
			background-color: #fff;
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			color: #999;
			font-size: 24rpx;

			.ico {
				font-size: 40rpx;
			}

		}

		.ed {
			color: #FF589B !important;
		}

	}

	#btmTopBtn {
		color: #ff589b;
		width: 88rpx;
		height: 82rpx;
		border-radius: 50%;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: column;
		background-color: #fff;

		.ico {
			font-size: 42rpx;
		}
	}

	.picker-view {
		width: 100%;
		height: 412rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.index {
		padding: 120rpx 0 104rpx;

		.operation {
			width: 100%;
			padding: 0rpx 22rpx;
			box-sizing: border-box;

			.operation_region {
				display: flex;
				justify-content: space-between;
				box-shadow: 0 0.3rem 0.8rem rgba(255, 88, 155, 0.4);
				background: -webkit-linear-gradient(315deg, rgba(255, 88, 155, 0.6) 0%, #ff589b 100%);
				background-color: #fff;
				color: #fff;
				padding: 25rpx 40rpx;
				border-radius: 80rpx;
				max-width: 1500rpx;

				.operation_item {
					align-items: center;
					display: flex;
					font-size: 28rpx;

					.name {
						margin-right: 8rpx;
					}

					.ico {
						transition: transform 0.5s;
						transform: translateY(4rpx);
					}

					.icon_active {
						transform: translateY(4rpx) rotate(180deg) !important;
					}
				}
			}
		}

		.rule {
			padding: 0 30rpx;
			margin-top: 20rpx;
			box-sizing: border-box;

			.rule_region {
				width: 100%;
				padding: 20rpx 0;
				display: flex;
				flex-flow: wrap;
				background-color: #fff;
				border-radius: 20rpx;

				.rule_item {
					margin: 20rpx 28rpx;
					display: flex;
					align-items: center;
					background-color: #fafafa;
					width: 25%;
					border-radius: 40rpx;
					justify-content: center;
					padding: 15rpx 0;
					font-size: 28rpx;

					.ico {
						margin-right: 10rpx;
					}
				}

				.rule_active {
					background-color: rgba(255, 88, 155, 0.1) !important;
					color: #ff589b !important;
				}
			}
		}

		.list {
			padding: 30rpx;
			box-sizing: border-box;

			.list_item {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
				background-color: #fff;
				margin: 20rpx 0;
				border-radius: 20rpx;

				.hd {
					display: flex;

					.left {
						image {
							width: 240rpx;
							height: 240rpx;
							border-radius: 20rpx;
							margin-right: 20rpx;
						}
					}

					.right {
						.name {
							display: flex;

							image {
								width: 40rpx;
								height: 40rpx;
							}
						}

						.age {
							font-size: 28rpx;
							margin-top: 20rpx;
						}

						.work {
							font-size: 28rpx;
						}

						.tagList {
							display: flex;
							flex-flow: wrap;
							margin-top: 20rpx;

							.tag {
								padding: 10rpx;
								font-size: 28rpx;
								background-color: rgba(255, 88, 155, 0.05);
								color: #ff589b;
								border-color: rgba(255, 88, 155, 0.1);
							}
						}
					}
				}

				.bd {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.tag {
						background-color: #ff589b;
						color: #fff;
						padding: 0 10rpx;
						margin-right: 20rpx;
					}

					.desc {
						width: 524rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
				}
			}
		}
	}

	.more {
		padding: 20rpx;
		box-sizing: border-box;
		height: 100vh;
		overflow: auto;

		.search {
			margin: 20rpx 0;

			.search_region {
				display: flex;
				width: 100%;
				height: 80rpx;
				border: 0;
				background-color: #f8f8f8;
				border-radius: 10rpx;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;

				input {
					flex: 1;
				}
			}
		}

		.sign {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 0;

			.left {
				color: #ff589b;
			}

			.right {
				color: #fd9f23;

				.ico {
					font-family: 'www_zeai_cn_iconfont' !important;
					font-style: normal;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					display: inline-block;
					color: #fd9f23;
				}
			}
		}

		.more_item {
			padding: 30rpx 0;

			.title {
				display: flex;
				width: 100%;
				justify-content: space-between;
				align-items: center;

				.right {
					display: flex;
					align-items: center;

					.text {
						color: #999;
					}

					.text_active {
						color: #ff589b;
					}
				}
			}

			.content {
				padding: 20rpx 0;
				display: flex;
				flex-flow: wrap;

				.item_active {
					color: #ff589b !important;
					background-color: rgba(255, 88, 155, 0.1) !important;

					&::before {
						position: absolute;
						font-family: 'www_zeai_cn_iconfont' !important;
						content: '\e64a';
						width: 36rpx;
						height: 36rpx;
						line-height: 36rpx;
						font-size: 36rpx;
						right: 0;
						bottom: 0;
					}
				}

				.item {
					min-width: 154rpx;
					height: 66rpx;
					color: #666;
					padding: 0 10rpx;
					position: relative;
					display: block;
					text-align: center;
					line-height: 66rpx;
					border-radius: 0.4rem;
					background-color: #f7f7f7;
					box-sizing: border-box;
					overflow: hidden;
					font-family: Arial, Helvetica, sans-serif;
					margin: 10rpx 4rpx;
				}
			}
		}
	}

	.myOverlay {
		width: 100%;

		.myOverlay_region {
			width: 90%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			height: 578rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.title {
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				box-sizing: border-box;
				align-items: center;

				.left {
					font-size: 36rpx;
				}
			}
		}
	}
</style>